<template>
  <uni-popup ref="popupRef" type="center" border-radius="10px 10px 0 0" >
    <!-- :mask-click="false" -->
    <view class="pop-content">
      <view class="popTop">
        <view class="popTop1">
          <view class="left">
            <view class="headImg">
              <image :src="state.studentItem?.head_img" v-if="state.studentItem?.head_img"></image>
            </view>
            <view class="title" @click="openUserPop">{{state.studentItem?.id || '点击此处查询id'}}</view>   
          </view>
          <view class="right">
            <view class="rightItem">
              <text>订单价格</text>
              <uni-easyinput type="number" placeholder="输入" class="input" @blur="changePrice"></uni-easyinput>
            </view>
          </view>
        </view>
        
        <view class="rightItem1">
          <text>派单价格:</text>
          <uni-easyinput type="number" placeholder="输入" class="input" @blur="changeSendPrice"></uni-easyinput>
        </view>
      </view>
      <view class="poptabs">
        <view class="tabs2">
          <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in tabs2" :key="index" @click="changeTab2(item)">
            {{item?.name}}
          </view>
        </view>
      </view>
      <view class="popForm">
        <uni-forms 
          v-model="state.formData"
          ref="formRef"
          :rules="rules"
          validateTrigger="bind"
          :label-width="80"
          label-align="left"
          :labelStyle="{ fontWeight: 'bold'}"
        >
          <uni-forms-item required label="编号:" name="order_no">
            <uni-easyinput type="number" v-model="state.formData.order_no" placeholder="请输入订单编号" />
          </uni-forms-item>
          <uni-forms-item required name="name" label="名称:">
            <uni-easyinput v-model="state.formData.name" placeholder="请输入" />
          </uni-forms-item>
          <uni-forms-item required name="major" label="专业:">
            <picker @change="bindMajorChange" :value="state.majorIndex" :range="tabs4">
              <view class="uni-input" v-if="tabs4[state.majorIndex]">{{tabs4[state.majorIndex]}}</view>
              <view class="uni-input placeholder" v-else>请选择专业</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item required name="school_level" label="学校水平:">
            <picker @change="bindPickerChange" :value="state.index" :range="state.array">
              <view class="uni-input" v-if="state.array[state.index]">{{state.array[state.index]}}</view>
              <view class="uni-input placeholder" v-else>请选择学历层次</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item required name="information" label="所有资料:">
            <uni-easyinput v-model="state.formData.information" placeholder="请输入" />
          </uni-forms-item>
          <uni-forms-item label="软件要求:">
            <view class="softwareMain">
              <uni-easyinput v-model="state.formData.software_ask_one" placeholder="请输入" style="width: 90rpx; margin-right: 10rpx;"/>
              <uni-easyinput v-model="state.formData.software_ask_two" placeholder="请输入" style="width: 90rpx; margin-right: 10rpx;"/>
              <uni-easyinput v-model="state.formData.software_ask_three" placeholder="请输入" style="width: 90rpx"/>
            </view>
            
          </uni-forms-item>
          <uni-forms-item required name="middle_date" label="开题时间:">
            <picker mode="date" :value="state.formData?.middle_date" @change="bindMiddlePicker">
              <view class="uni-input" v-if="state.formData.middle_date">{{state.formData.middle_date}}</view>
              <view class="uni-input placeholder" v-else>请选择</view>
            </picker>
          </uni-forms-item>
          <uni-forms-item required name="end_date" label="定稿:">
            <picker mode="date" :value="state.formData.end_date" @change="bindEndPicker">
              <view class="uni-input" v-if="state.formData.end_date">{{state.formData.end_date}}</view>
              <view class="uni-input placeholder" v-else>请选择</view>
            </picker>
          </uni-forms-item>
        </uni-forms>  
      </view>
      <view class="submit" @click="submitBtn">确认</view>
    </view>  
  </uni-popup>
  <uni-popup ref="childPopup" type="center">
    <view class="popup-content">
      <view class="search">
        <uni-easyinput placeholder="搜索学生" class="uni-input" @input="changeSearch" @clear="changeSearch"/>
      </view>
      
      <view class="studentList">
        <view class="studentItem" v-for="(item, index) in state.studentInfo" :key="index" @click="changeItem(item)">
          <image :src="item?.head_img"/>
          <view class="right">
            <view class="h3">{{item?.nickname}}</view>
            <view class="p">ID:{{item?.id}}</view> 
          </view> 
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
  import { ref, reactive, unref, nextTick, onMounted } from 'vue'
  import { tabs2, tabs4 } from '../data.js'
  import { getStudentList, createOrder} from '@/utils/front.js'
  import { onShow } from '@dcloudio/uni-app'
  const popupRef = ref(null)
  const formRef = ref(null)
  const childPopup = ref(null)
  const emits = defineEmits(["changeStudent", "refresh"]);
  
  const state = reactive({
    tabId: 1,
    formData:{
      order_no: '',
      name: '',
      major: '',
      school_level: '',
      information: '',
      software_ask_one: '',
      software_ask_two: '',
      software_ask_three: '',
      middle_date: null,
      end_date: null
    },
    array: ['985', '211', '一本', '其他'],
    index: null, 
    price: 0,
    sendPrice: 0,
    search: "",
    studentInfo: [],
    studentItem: {},
    majorIndex: null
  })
  const rules = {
    
  }
  const changeItem = (item) => {
    state.studentItem = item
    closeChildPopup()
  }
  // 搜索学生
  const changeSearch = (e) => {
    state.search = e ? e : ''
    nextTick(() => {
      getStudentInfo()
    })
  }
  // 获取学生列表
  const getStudentInfo = () => {
    getStudentList({search: state.search}).then((res) => {
      if (res?.code == 1) {
        state.studentInfo = res?.result
      }
      
    })
  }
  // 订单价格
  const changePrice = (e) => {
    console.log(156, e)
    state.price = e?.detail?.value
  }
  // 派单价格
  const changeSendPrice = (e) => {
    state.sendPrice = e?.detail?.value
  }
  // 打开子弹窗
  const openUserPop = () => {
    childPopup.value.open()
    getStudentInfo()
  }
  // 关闭子弹窗
  const closeChildPopup = () => {
    childPopup.value.close()
  }
  const openPopup = () => {
    popupRef.value.open()  
  }
  const changeTab2 = (item) => {
    state.tabId = item.id
  }
  // 专业选择
  const bindMajorChange = (e) => {
    state.majorIndex = e.detail.value;
    state.formData.major = tabs4[e.detail.value]
  }
  // 学历层次选择
  const bindPickerChange = (e) => {
    state.index = e.detail.value
    state.formData.school_level = state.array[e.detail.value]
  }
  // 修改开题时间日期
  const bindMiddlePicker = (e) => {
    state.formData.middle_date = e?.detail?.value
  }
  // 修改定稿日期
  const bindEndPicker = (e) => {
    state.formData.end_date = e?.detail?.value
  }
  
  // 点击确认按钮
  const submitBtn = async() => {
    const validate = await unref(formRef)
      .validate()
      .catch(error => {
        console.log("error: ", error);
      });
    if (!validate) {
      return;
    }
    let params = {
      ...state.formData,
      student_id: state.studentItem?.id,
      price: state.price,
      send_price: state.sendPrice,
      type: state.tabId
    }
    createOrder({...params}).then((res) => {
      if (res?.code == 1) {
        popupRef.value.close()
        resetForm()
        emits('refresh')
      }
    })
  }
  const resetForm = () => {
    state.formData.name = null;
    state.formData.major = null;
    state.formData.school_level = null;
    state.formData.software_ask_one = null;
    state.formData.software_ask_two = null;
    state.formData.software_ask_three = null;
    state.formData.middle_date = null;
    state.formData.end_date = null;
    state.studentItem = null;
    state.price = null;
    state.sendPrice = null;
    state.tabId = 1
  }
  // 将方法暴露给父组件
  defineExpose({
    openPopup
  });
  
</script>

<style lang="scss" scoped>
  .pop-content{
    // width: 686rpx;
    border-radius: 14rpx;
    background: rgba(231, 231, 231, 1);
    border: 2rpx solid rgba(0, 0, 0, 0.28);
    padding:20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .popTop{
      width: 686rpx;
      padding-top:10rpx;
      padding-bottom: 10rpx;
      // height: 142rpx;
      border-radius: 14rpx;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .popTop1{
        width: 686rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .left{
        margin-left: 20rpx;
        // width: 300rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .headImg{
          width: 96rpx;
          height: 96rpx;
          background: rgba(217, 217, 217, 1);
          border: 2px dashed rgba(0, 0, 0, 0.55);
          border-radius: 100%;
          image{
            width: 96rpx;
            height: 96rpx;
            background: rgba(217, 217, 217, 1);
            border-radius: 100%;
          }
        }
        .title{
          margin-left: 10rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: rgba(164, 164, 164, 1);
        }
      }
      .right{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .rightItem{
          width: 260rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 10rpx;
          text{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 16rpx;
          }
          .input{
            width:100%;
            height: 30rpx;
            margin-top:10rpx;
          }
        }
      }
      .rightItem1{
        width: 630rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 10rpx;
        text{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          margin-right: 10rpx;
        }
        .input{
          width:80%;
          height: 20rpx;
          margin-top:10rpx;
        }
      }
    }
    .poptabs{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30rpx;
      width: 686rpx;
      .tabs2{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        // border-bottom: 2rpx solid rgba(65, 65, 65, 1);
        padding-bottom:30rpx;
        .tabs2Item{
          width: 64rpx;
          height: 34rpx;
          border-radius: 6rpx;
          border: 2rpx solid rgba(107, 107, 107, 1); 
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          text-align: center;
          color: rgba(122, 122, 122, 1);
          margin-left: 50rpx;
          margin-right: 50rpx;
        }
        .tabs2ItemHover{
          border: 2rpx solid rgba(11, 105, 218, 1);
          background: rgba(209, 218, 243, 1);
          color: rgba(11, 105, 218, 1);
        }
      }
      .uni-input{
        width: 648rpx;
        height:76rpx;
        border: 2rpx solid rgba(0, 0, 0, 1);
        text-align: center;
        margin-top:30rpx;
        color:#cccccc;
      }
    }
    .popForm{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 686rpx;
      .uni-input{
        width: 440rpx;
        height:76rpx;
        background: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left:20rpx;
      }
      .softwareMain{
        display: flex;
        flex-direction: row;
      }
    }
    .submit{
      width: 444rpx;
      height: 84rpx;
      border-radius: 10rpx;
      background: rgba(135, 255, 124, 1);
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(83, 83, 83, 1);
    }
  }
  .popup-content{
    width: 668rpx;
    height: 710rpx;
    border: 2rpx solid rgba(0, 0, 0, 1);
    background: #ffffff;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .search{
      width: 350rpx;
      // height: 58rpx;
      border-radius: 10rpx;
      border: 2rpx solid rgba(0, 0, 0, 1);
      margin-top: 20rpx;
      .uni-input{
        width: 100%;
        height: 100%
      }
    }
    .studentList{
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 600rpx;
      overflow-y: scroll;
      .studentItem{
        width: 612rpx;
        height: 142rpx;
        flex-shrink: 0;
        border-radius: 14rpx;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: rgba(247, 247, 247, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-top: 20rpx;
        image{
          width: 102rpx;
          height: 102rpx;
          border-radius: 100%;
          background: #ffffff;
          margin-left: 30rpx;
        }
        .right{
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
          .h3{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: rgba(70, 70, 70, 1);
          }
          .p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(169, 169, 169, 1);
            margin-top: 10rpx;
          }
        }
      }
    }
  }
</style>